<!DOCTYPE html>
<html lang='zh-CN'>

<head>
  <title>calc-web - 在线计算器</title>
  <meta charset='utf-8'>
  <style>
    button {
      min-width: 32px;
      min-height: 64px;
    }

    .calc-key-width {
      /* width: 100%; */
      width: 120px;
    }

    div#calc-div-9keys>div {
      display: flex;
      display: -webkit-flex;
      /* justify-content: space-between; */
      /* justify-content: center; */
      align-items: stretch;
    }

    .calc-box {
      width: 480px;
    }
  </style>
</head>

<body>
  <div class="root">
    <div class="calc-box" id="calc-div-display" style="border:1px solid black;">
      <div id="calc-display">0</div>
    </div>
    <div class="calc-box" style="display: flex;">
      <div id="calc-div-9keys">
        <div>
          <div><button id="calc-key-7" class="calc-key-width">7</button></div>
          <div><button id="calc-key-8" class="calc-key-width">8</button></div>
          <div><button id="calc-key-9" class="calc-key-width">9</button></div>
        </div>
        <div>
          <div><button id="calc-key-4" class="calc-key-width">4</button></div>
          <div><button id="calc-key-5" class="calc-key-width">5</button></div>
          <div><button id="calc-key-6" class="calc-key-width">6</button></div>
        </div>
        <div>
          <div><button id="calc-key-1" class="calc-key-width">1</button></div>
          <div><button id="calc-key-2" class="calc-key-width">2</button></div>
          <div><button id="calc-key-3" class="calc-key-width">3</button></div>
        </div>
        <div>
          <div><button id="calc-key-0" style="width: 240px;">0</button></div>
          <div id="calc-div-start">
            <div><button id="calc-start" class="calc-key-width">=</button></div>
          </div>
        </div>
      </div>
      <div id="calc-div-operation">
        <div><button id="calc-key-p" class="calc-key-width">+</button></div>
        <div><button id="calc-key--" class="calc-key-width">-</button></div>
        <div><button id="calc-key-m" class="calc-key-width">*</button></div>
        <div><button id="calc-key-d" class="calc-key-width">/</button></div>
      </div>
    </div>
  </div>
</body>

<script>
  var calced = false;
  // 上次计算结果
  var ans = 0;
  function calc() {
    return eval(document.body.querySelector("#calc-display").innerHTML);
  }
  document.querySelector("#calc-start").onclick = function (e) {
    try {
      let val = calc();
      ans = val;
      document.querySelector("#calc-display").textContent = "" + val;
    } catch (e) {
      alert(e);
      document.querySelector("#calc-display").textContent = "0";
    }
    calced = true;
  }
  // 添加到显示窗口的事件函数
  function myonclick(e) {
    let elem = document.querySelector("#calc-display");
    if (calced) {
      let ops = "+-*/";
      if (ops.includes(e.target.textContent))
        elem.textContent = "ans";
      else
        elem.textContent = "0";
      calced = false;
    }
    if (elem.textContent === '0') elem.textContent = "";
    elem.textContent += e.target.textContent;
    // console.log(e);
  }
  // 添加按钮事件
  let keys = "0123456789p-md";
  for (let c of keys) {
    let elem = document.querySelector("#calc-key-" + c);
    if (!elem) continue;
    elem.onclick = myonclick;
    calced = false;
  }
  // 绑定键盘事件
  window.onkeydown = function (e) {
    // console.log(e);
    let key = e.key;
    let keys_events = [
      // 直接输入
      {
        keys: '0123456789+-*/',
        caller: function () {
          let keys_map = '0123456789+-*/';
          let keys_code = '0123456789p-md';
          myonclick({
            target: document.querySelector("#calc-key-" + keys_code[keys_map.indexOf(key)])
          });
        }
      },
      {
        keys: ["Enter", '='],
        caller: function () {
          document.querySelector("#calc-start").onclick();
        }
      },
      {
        keys: ["Backspace",],
        caller: function () {
          document.querySelector("#calc-display").textContent = "0";
        }
      }
    ];
    for (let ev of keys_events) {
      if (ev.keys.includes(key))
        ev.caller();
    }

  }
</script>

</html>